<template>
	<view v-show="agent.length">
		<u-navbar title="企划代理"></u-navbar>
		<u-gap height="30"></u-gap>
		<view class="bg-white center">
			<u-grid :col="3">
				<u-grid-item class="grid" v-for="i in agent" :key="i.id">
					<image :src="i.full_icon" style="width: 72rpx;height: 72rpx;" mode="widthFix"></image>
					<view class="title">{{i.cate_name}}</view>
					<view class="sub">{{i.start_price}}/月起</view>
				</u-grid-item>
			</u-grid>
		</view>

		<u-gap height="30"></u-gap>
		<view class="bg-white center">
			<u-cell-group>
				<u-cell-item :title="i.title" :value="i.value" v-for="i in totleItem" :key="i.id" @click="popup(i.id)"></u-cell-item>
			</u-cell-group>
		</view>

		<u-gap height="30"></u-gap>
		<view class="bg-white center">
			<u-cell-group>
				<u-cell-item title="签约时长" :value="duration+'个月'" @click="timeShow=true"></u-cell-item>
			</u-cell-group>
		</view>

		<u-popup v-model="popShow" mode="bottom">
			<view class="pop-ct" v-if="currentItem">
				<view class="title">{{currentItem.cate_name}}</view>
				<view class="center des">
					<view class="flex-row justify-center">
						<view class="left">工作内容</view>
						<view class="right">{{currentItem.description}}</view>
					</view>
					<view class="flex-row justify-center">
						<view class="left">工作时间</view>
						<view class="right">{{currentItem.working_days}}</view>
					</view>
					<view class="flex-row justify-center" v-if="currentItem.notice">
						<view class="left">注意事项</view>
						<view class="right">{{currentItem.notice}}</view>
					</view>
					<view class="flex-row justify-center" v-if="currentItem.workload">
						<view class="left">工作量</view>
						<view class="right">{{currentItem.workload}}</view>
					</view>
				</view>

				<u-gap height="40"></u-gap>
				<view class="center radio-list">
					<view class="item bt position" v-for="i in currentItem.agent_position" :key="i.id" @click="setPos(i)">
						<view class="flex-row align-center">
							<text class="title">{{i.position}}</text>
							<text class="sub u-line-1">{{i.start_price}}{{'-'+i.end_price}}/月 {{i.experience?'工作经验'+i.experience:''}}</text>
						</view>
						<view class="radio" :class="{ on: i.id==position }"></view>
					</view>
					<view class="item bt" @click="setPos({id:null})">
						<view class="flex-row align-center">
							<text>不选择</text>
						</view>
						<view class="radio" :class="{ on: null==position }"></view>
					</view>
				</view>

				<my-btn gold style="margin: 60rpx auto" @click="choose">确定</my-btn>
			</view>
		</u-popup>

		<u-popup v-model="timeShow" mode="bottom">
			<view class="pop-ct">
				<view class="title">签约时长</view>
				<view class="center des">
					<view class="flex-row justify-center">
						<view class="left">注意事项</view>
						<view class="right">企划代理最低签约时长为三个月</view>
					</view>
				</view>

				<u-gap height="40"></u-gap>
				<view class="center radio-list">
					<view class="item bt position" v-for="i in time" :key="i" @click="choosetime=i">
						<view class="flex-row align-center">
							<text>{{i}}个月</text>
						</view>
						<view class="radio" :class="{ on: choosetime==i }"></view>
					</view>
				</view>

				<my-btn gold style="margin: 60rpx auto" @click="timeShow=false,duration=choosetime">确定</my-btn>
			</view>
		</u-popup>

		<my-btn gold style="margin: 60rpx auto" @click="submit">确认下单</my-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				popShow: false,
				timeShow: false,
				time: [3, 6, 12],
				choosetime: 3,
				duration: 3,
				agent: [],
				current: 0,
				position: null,
				pos: []
			};
		},
		computed: {
			currentItem() {
				return this.agent.find(item => item.id == this.current)
			},
			totleItem() {
				let items = this.pos.map(item => {
					let agent = this.agent.find(agent => agent.id == item.agent)
					let title = agent.cate_name
					let value = '未选择'
					if (item.pos) {
						value = agent.agent_position.find(pos => pos.id == item.pos).position
					}
					return {
						id: item.agent,
						title: title,
						value: value
					}
				})
				return items
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$u.get('/agent/info').then(res => {
					let agent = res.data.result.agent
					this.agent = agent
					agent.map(item => {
						this.pos.push({
							agent: item.id,
							pos: null
						})
					})
				})
			},
			popup(id) {
				this.current = id
				this.position = this.pos.find(item => item.agent == id).pos
				this.popShow = true
			},
			setPos(i) {
				let target = this.agent.find(item => item.id == this.current)
				this.position = i.id
			},
			choose() {
				let target = this.pos.find(item => item.agent == this.current)
				target.pos = this.position
				this.popShow = false
			},
			submit() {
				let count = this.pos.filter(item => item.pos != null).length

				if (count) {
					this.$u.post('/order/proceeds', {
						product_id: this.id,
						type: 2,
						duration: this.duration,
						agent: this.pos
					}).then(res => {
						let no = res.data.result.trade_no
						this.$goto('/pages/order/create?no=' + no)
					})
				} else this.$msg('至少选择一项服务')
			},
		}
	}
</script>

<style lang="scss">
	.center {
		width: 670rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 0 auto;
	}

	.grid {
		.title {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.sub {
			margin-top: 8rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}

	.pop-ct {
		.title {
			margin: 32rpx auto;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.des {
			background: rgba(238, 188, 128, 0.4);
			padding: 32rpx 0;
			border-radius: 4rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(147, 107, 41, 1);

			.flex-row {
				margin-top: 16rpx;

				&:nth-of-type(1) {
					margin-top: 0;
				}
			}

			.left {
				width: 140rpx;
				position: relative;

				&::after {
					content: '|';
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(-20rpx, 0);
				}
			}

			.right {
				width: 460rpx;
			}
		}
	}

	.radio-list {
		padding-left: 8rpx;
	}

	.item {
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);

		&.on {
			opacity: 0.7;
			transform: translate(1px, 1px);
		}

		&.bt {
			justify-content: space-between;
		}

		.text {
			min-width: 160rpx;
		}

		.radio {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
			background: url(../../static/images/ra0.png);
			background-size: 100% 100%;

			&.on {
				background: url(../../static/images/ra1.png);
				background-size: 100% 100%;
			}
		}
	}

	.position {
		.sub {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-left: 16rpx;
		}
	}
</style>
